<template>
  <div class="Tables">
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column label="#" type="index" show-overflow-tooltip width="50" align="center"></el-table-column>
      <el-table-column prop="title" label=" 班型名称 " show-overflow-tooltip align="center"></el-table-column>
      <el-table-column prop="sub_title" label=" 班型副标题 " show-overflow-tooltip align="center"></el-table-column>

      <el-table-column prop="cost" label=" 班型费用 " align="center">
        <template slot-scope="scope">
          <span>{{scope.row.cost}}元</span>
        </template>
      </el-table-column>

      <el-table-column prop="apply_type" label=" 申领类型 " align="center">
        <template slot-scope="scope">
          <span>{{scope.row.apply_type.title.join(',')}}</span>

        </template>
      </el-table-column>
      <el-table-column prop="coupon_id" label=" 优惠券 " align="center" v-if="checkPermission(['reduceOperate'])">
        <template slot-scope="scope">
          <el-select v-model="scope.row.coupon_id" placeholder="请选择" filterable @change="changeCoupon(scope.row)">
            <el-option-group v-for="group in options" :key="group.label" :label="group.label">
              <el-option v-for="item in group.options" :key="item.value" :label="item.label+(item.status!=1?'-'+item.text:'')" :disabled="item.status!=1" :value="item.value">
                {{item.label}}
                <span v-if="item.status!=1" style="color: #F56C6C">（{{item.text}}）</span>
              </el-option>
            </el-option-group>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column prop="" label="是否开启" align="center" v-if="checkPermission(['reduceOperate'])">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.coupon_state" @change="changeis_hot(scope.row.coupon_state,scope.row.id)" :active-value='1'
            :inactive-value='0'></el-switch>
        </template>
      </el-table-column>


    </el-table>
    <el-row>
      <el-col :span="24" class="pagination">
        <!-- 翻页 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pages.page"
          :page-sizes="[10, 20, 30]" :page-size="10" background layout="total, sizes, prev, pager, next" :total="pages.total">
        </el-pagination>
      </el-col>
    </el-row>

  </div>
</template>

<script>
  import {
    updateStateData,
    updatesort,
    updateIsHot
  } from '@/api/course'
  //按钮权限验证
  //api
  import {
    couponoption,
    packageupdatecoupon,
    packageupdatecouponstate
  } from '@/api/coupon'
  import checkPermission from "@/utils/permission";
  export default {
    data() {
      return {
        //表格数据
        tableData: [],
        //页码数据
        pages: {},
        value: true,
        options: []
      }
    },
    props: {
      //表格数据
      tabData: {
        type: Object,
        default: () => {
          return {}
        },
      },

    },
    watch: {
      tabData(val) {
        this.tableData = val.list
        this.pages = val.page
      },
    },
    methods: {
      //按钮权限验证
      checkPermission,
      async changeCoupon(e) {
        console.log(e)
        let params = {
          id: e.id,
          couponId: e.coupon_id
        }
        let data = await packageupdatecoupon(params)
        if (data.code == '0000') {
          this.$message({
            message: '设置成功',
            type: 'success'
          });
          //通知父级刷新表格
          this.$emit('refreshdata')
        }

      },
      //修改热门状态

      async changeis_hot(val, id) {
         let state=val?0:1
        let params = {
          id,
          couponState: state
        }
        let data = await packageupdatecouponstate(params)
        if (data.code == '0000') {
          this.$message.success('修改状态成功！')
        }
          this.$emit('refreshdata')

      },
      //获取优惠券
      async getcouponoption() {
        let data = await couponoption()
        if (data.code == '0000') {
          let couponlist = data.data
          let labelList = []
          couponlist.forEach(p => {
            if (labelList.indexOf(p.category) == -1) {
              labelList.push(p.category)
            }
          })
          labelList.forEach(item => {
            this.options.push({
              label: item,
              options: []
            })
          })
          this.options.forEach(item => {
            couponlist.forEach(p => {
              if (item.label == p.category) {
                item.options.push({
                  label: p.title,
                  value: p.id,
                  status: p.status.value,
                  text: p.status.title,
                })
              }
            })
          })
        }
      },
      //排序输入事件
      inputval(val) {

      },
      handleSizeChange(val) {
        this.$emit('changepageTotal', val)
      },
      handleCurrentChange(val) {
        this.$emit('changepage', val)
      },

    },
    mounted() {
      this.getcouponoption()

    }
  }
</script>

<style scoped lang='scss'>
  .Tables {
    margin-top: 25px;
  }

  .edittext {
    margin: 0 10px;
    color: #4c68ef;
    cursor: pointer;
  }

  .pagination {
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
  }

  ::v-deep {
    .el-input--mini .el-input__inner {
      text-align: center;
    }
  }

  .sortbtn {
    padding: 5px 8px;
  }
</style>
